<template>
  <div id="app">
    <div class="full">
      <!--顶部工具栏开始-->
      <top :isPc="isPc" :contentList="contentList"></top>
      <!-- <div class="toolbar">
        <div class="button-group">
          <el-button-group>
            <el-button type="primary" size="small" @click="switchPc">
              <img src="../../assets/image/computer.png">
            </el-button>
            <el-button type="primary" size="small" @click="switchPhone">
              <img src="../../assets/image/phone.png">
            </el-button>
          </el-button-group>
        </div>
        <div class="split-line" />
        <div class="button-group">
          <el-button type="primary" size="small" @click="handelDelete">
            <img src="../../assets/image/deleteIcon.png">
          </el-button>
        </div>
        <div class="split-line" />
        <div class="button-group">
          <el-select v-model="equipment" placeholder="请选择设备" @change="changeEquipment(equipment)">
            <el-option
              v-for="item in equipmentList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div> -->
      <!--顶部工具栏结束-->

      <!--中间整体部分开始-->
      <div class="full-container">
        <!--左边组件库面板开始-->
        <transition name="slide-fade">
          <div class="edit-panel" style="float: left" v-show="showLeft">
            <div class="panel-title">
              组件库
              {{ contentList.length }}
            </div>
            <div class="widget-panel">
              <el-collapse v-model="activeNames" style="padding-left: 10px" @change="handleChange">
                <el-collapse-item title="基础元素" name="1">
                  <div>
                    <ul class="widget-class-container basic">
                      <draggable
                        class="dragArea list-group"
                        :list="componentList"
                        :group="{name:'people',pull:'clone',put:false}"
                        :clone="clone"
                        @change="log"
                      >
                        <li v-for="(element, i) in componentList" :key="i" class="widget-class-item" @mouseover="mouseover(element.name)" @mouseout="mouseout(element.name)">
                          <div class="icon-wgt">
                            <img :src="element.icon">
                          </div>
                          <div class="widget-name">{{ element.name }}</div>
                        </li>
                      </draggable>
                    </ul>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="控制元素" name="2" class="edge">
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </transition>
        <!--左边组件库部分结束-->
        <div class="foldLeft">
          <div class="leftIcon" @click="showLeft = ! showLeft">
            <img v-if="showLeft" src="../../assets/image/foldIcon.png">
            <img v-else src="../../assets/image/unfoldIcon.png">
          </div>
        </div>

        <!--右边属性部分开始-->
        <transition name="slide-fade">
          <div class="edit-panel" style="float: right;" v-show="showRight">
            <div class="option-container">
              <!-- 可以尝试加入v-model引入搜索功能 -->
              <el-input placeholder="元件名称" class="input" />
              <el-tabs v-model="activeName" type="card" stretch style="margin-top: 10px;background-color: #ffffff" @tab-click="handleClick">
                <el-tab-pane label="属性" name="first">
                  <component :is="editCom.name" :key="index" :key2="index" :configData="editCom.configData" @editSubmit="editSubmit"/>
                </el-tab-pane>
                <el-tab-pane label="属性2" name="first2">
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </transition>
        <!--右边属性部分结束-->

        <div class="foldRight">
          <div class="rightIcon" @click="showRight = ! showRight">
            <img v-if="showRight" src="../../assets/image/unfoldIcon.png">
            <img v-else src="../../assets/image/foldIcon.png">
          </div>
        </div>

        <!--中间编辑部分开始-->
        <div v-if="$store.state.isPc" class="edit-stage">
          <div class="for-container-scroll">
            <div class="main-stage">
              <div class="row">
                <el-row :gutter="15">
                  <draggable
                    class="dragArea list-group"
                    :list="contentList"
                    group="people"
                    @change="log"
                    @start="isDragging = true"
                    @end="isDragging = false"
                  >
                    <el-col
                      v-for="(element, i) in contentList"
                      :key="i"
                      :span="element.span"
                      class="list-group-item"
                    >
                      <!-- <vue-drag-resize :isActive="true" :isResizable="true" :h="parseInt(element.height)"> -->
                      <card
                        :did="index + 'test'"
                        :height="element.height"
                        @click.native="changeType(element.type, i)"
                      >
                        <el-card
                          :class="{'active': element.isActive}"
                          class="elCard"
                        >
                          <component
                            :is="element.type"
                            :title="element.name"
                            :configData="element.config"
                          />
                        </el-card>
                      </card>
                      <!-- </vue-drag-resize> -->
                    </el-col>
                  </draggable>
                </el-row>
              </div>
            </div>
          </div>
        </div>
        <!--中间编辑部分结束-->
      </div>
      <!--中间整体部分结束-->
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
// import { Link, LineChart, Table, Zimage, card } from '@/components/elecomponent'
import Link from '@/components/elecomponent/link.vue'
import ZImage from '@/components/elecomponent/image.vue'
import card from '@/components/elecomponent/card.vue'
// import LineChart from '@/components/echarts/line-chart.vue'
// import Pie from '@/components/echarts/pie.vue'
// import ElCollapseTransition from 'element-ui/lib/transitions/collapse-transition'
import Top from '@/views/app/components/demoChild/top.vue'

import TableDisplayEdit from '@/views/app/components/table/edit.vue'
import TableDisplay from '@/views/app/components/table/display.vue'

const tableData = [{
  date: '2016-05-02',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1518 弄'
}, {
  date: '2016-05-04',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1517 弄'
}, {
  date: '2016-05-03',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1519 弄'
}, {
  date: '2016-05-05',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1514 弄'
}, {
  date: '2016-05-06',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1513 弄'
}]
const columnData = [{
  prop: 'date',
  label: '日期',
  width: '180'
}, {
  prop: 'name',
  label: '姓名',
  width: '180'
}, {
  prop: 'address',
  label: '地址'
}]

export default {

  name: 'Demo',
  order: 2,
  components: {
    Top,
    draggable,
    Link,
    // LineChart  //无法导入
    ZImage,
    card,
    // ElCollapseTransition,
    // LineChart
    // Pie
    TableDisplayEdit,
    TableDisplay
  },
  data () {
    return {
      // 需要定义当前页面接收参数，编辑表单的参数管理
      editCom: {
        configData: {},
        name: ''
      },
      // 这里定义组件库所需要的用到的data
      componentList: [
        {
          name: '表格2',
          id: 4,
          span: 3,
          type: 'table-display',
          icon: require('../../assets/image/tableIcon.png'),
          hoverIcon: require('../../assets/image/tableIcon1.png'),
          config: {
              tmpParam: '原始数据'
          }
        }, {
          name: '图片',
          id: 1,
          span: 6,
          type: 'z-image',
          icon: require('../../assets/image/lineIcon.png'),
          hoverIcon: require('../../assets/image/lineIcon1.png')
        }
      ],
      contentList: [
        {
          span: 14,
          height: '240px',
          type: 'table-display',
          tableData: tableData,
          columnData: columnData,
          config: {
              tmpParam: '原始数据'
          }
        },
        {
          span: 14,
          height: '240px',
          type: 'table-display',
          tableData: tableData,
          columnData: columnData,
          config: {
              tmpParam: '原始数据'
          }
        }
      ],

      isPc: true,
      activeNames: ['1'],
      activeName: 'first',
      linkUnderline: false, // 设置链接下划线
      equipment: '', // 表格中选择的设备
      tableFlushNum: '', // 表格中刷新频率
      tableFit: false, // 列的宽度是否自撑开
      type: '', // 动态组件类型
      index: 0, // 动态组件contentList的索引值
      showLeft: true,
      showRight: true,
      icon: '',

      equipmentList: [ // 表格中设备列表
        {
          value: 'sdf',
          label: 'sdf'
        }
      ],
      tableSizeList: [ // 表格尺寸列表
        {
          value: 'medium',
          label: '中等'
        },
        {
          value: 'small',
          label: '小'
        },
        {
          value: 'mini',
          label: '迷你'
        }
      ]
    }
  },
  mounted () {
    // this.contentList.forEach((element, index) => {
    //   // request.get(element.dataSource).then(res => {
    //   const a = [
    //     {
    //       createTime: '2222',
    //       temperature: 15
    //     }
    //   ]
    //   this.contentList[index].data = a
    //   // })
    // })
  },
  methods: {
    editSubmit (editValue) {
      this.contentList[this.index].config = editValue
    },
    // 获取卡片动态组件类型和索引
    changeType (type, index) {
      this.editCom = {
        configData: this.contentList[index].config,
        name: this.editCom.name = type + '-edit'
      }
      this.index = index
      this.contentList.forEach(data => {
        data.isActive = false
      })
      this.contentList[index].isActive = true
    },

    changeAlign (type) {
      // type 判断是何种对齐方式
      console.log(type)
      switch (type) {
        case 'left':
          this.contentList[this.index].titleAlign = 'left'
          this.contentList[this.index].leftActive = true
          this.contentList[this.index].centerActive = false
          this.contentList[this.index].rightActive = false
          break
        case 'center':
          this.contentList[this.index].titleAlign = 'center'
          this.contentList[this.index].leftActive = false
          this.contentList[this.index].centerActive = true
          this.contentList[this.index].rightActive = false
          break
        case 'right':
          this.contentList[this.index].titleAlign = 'right'
          this.contentList[this.index].leftActive = false
          this.contentList[this.index].centerActive = false
          this.contentList[this.index].rightActive = true
          break
      }
    },
    // 切换为Pc端
    switchPc () {
      this.isPc = true
    },
    // 切换为手机端
    switchPhone () {
      this.isPc = false
    },
    // 删除卡片
    handelDelete () {
      console.log(this.index)
      this.contentList.splice(this.index, 1)
    },
    handleChange (val) {
      console.log(val)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    clone ({ type }) {
      return {
          span: 14,
          height: '240px',
          type: type,
          tableData: tableData,
          columnData: columnData,
          config: {
              tmpParam: '原始数据'
          }
        }
    },
    // 模拟hover过程
    mouseover (name) {
      const index = this.componentList.findIndex(function (item) {
        return item.name === name
      })
      this.icon = this.componentList[index].icon
      const hoverIcon = this.componentList[index].hoverIcon
      this.componentList[index].icon = hoverIcon
    },
    mouseout (name) {
      const index = this.componentList.findIndex(function (item) {
        return item.name === name
      })
      this.componentList[index].icon = this.icon
    },
    log: function (evt) { // evt里面有两个值，evt.added知道移动元素的ID，evt.removed知道删除元素的ID
      window.console.log(evt)
      console.log(this.contentList)
    },

    // 设置表格中的数据流
    changeEquipment (equipment) {
      console.log(equipment)
      // this.contentList[this.index].tableData =
      // this.contentList[this.index].columnData =
    },
    // 设置表格中的刷新频率
    handleTableFlushChange (value) {
      console.log(value)
    },
    // 设置链接是否有下划线
    changeLinkUnderline (linkUnderline) {
      console.log(linkUnderline)
      this.contentList[this.index].underline = !linkUnderline
    },
    // 表格的列是否自撑开
    changeableFit (tableFit) {
      console.log(tableFit)
      this.contentList[this.index].tableFit = !tableFit
    }
  }
}
</script>

<style scoped>
  #app div{
    box-sizing: border-box;
  }
  div{
    display: block;
  }
  .full{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  /* .toolbar{
    margin-left: 256px;
    width: 85%;
    height: 50px;
    background-image: linear-gradient(135deg, #041424 0%, #04294E 50%, #362D72 100%);
    position: fixed;

    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  } */
  .full-container{
    padding-top: 50px;
    height: 100%;
    overflow: hidden;
    background: #ecf0f4;
  }
  .edit-stage{
    height: 100%;
    overflow: hidden;
  }
  .for-container-scroll{
    height: 100%;
    overflow: auto;
    overflow-x:hidden;
    overflow-y: auto;
  }
  .main-stage {
    height: 4000px;
    width: 100%;
    float: left;
    position: relative;
    background-image: url("../../assets/image/background.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 10px 0;
  }
  .edit-panel{
    height: 100%;
    background-color: #fff;
    overflow: auto;
    position: relative;
    transition: width .15s ease-in;
    width: 200px;
  }
  .option-container{
    margin: 10px 8px 0;
    width: 184px;
  }
  /* 修改el组件的样式 */
  /* div.vdr.active{
    z-index: auto;

    border: none;
  } */
  .el-select-table {
    position: relative;
    margin-top: 10px;
    margin-bottom: -13px;
  }
  .el-input-table {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 100%;
    /* margin-bottom: 5px; */
    /* margin-top: 5px; */
    margin: 5px 0px;
  }
  .el-select-table {
    position: relative;
    margin-top: 5px;
  }
  .el-input-table2 {
    position: relative;
    font-size: 14px;
    width: 100%;
    margin-top: 5px;
  }
  /*  */
  .vdr.active:before{
    outline: none
  }
  .el-collapse-item__content {
    padding-bottom: 15px;
    font-size: 13px;
    color: #303133;
    line-height: 1.769230769230769;
  }
  .panel-title{
    margin: 10px 10px 0;
    padding: 0 10px;
    background-color: #fff;
    line-height: 34px;
    overflow-x: hidden;
  }
  .widget-panel{
    background-color: #fff;
    overflow-x:hidden;
    overflow-y: auto;
    margin:0 10px;
  }
  .widget-class-container {
    margin: 0 auto;
    padding: 0;
    width: 180px;
  }
  ul {
    display: block;
    list-style-type: disc;
  }
  .widget-class-item {
    list-style: none;
    float: left;
    width: 60px;
    height: 60px;
    margin: 15px 10px;
    cursor: pointer;
  }
  li{
    display: list-item;
    text-align: -webkit-match-parent;
  }
  .icon-wgt{
    width: 40px;
    height: 40px;
    margin: 0 10px;
  }
  .widget-name{
    text-align: center;
    font-size: 14px;
    margin: 3px auto;
  }

  .button-group{
    height: 40px;
    float: left;
    margin: 5px 10px;
  }
  .split-line{
    height: 34px;
    border-right: 1px dashed #fff;
    float: left;
    position: relative;
    top: 8px;
  }
  .align-span{
    border-top: 1px solid #d8dce5;
    border-bottom: 1px solid #d8dce5;
    box-shadow: none!important;
    padding: 8px 20px;
    font-size: 12px;
  }
  .left-span{
    border-left: 1px solid #d8dce5;
    border-radius: 4px 0 0 4px;
  }
  .center-span{
    border-left: 1px solid #d8dce5;
    border-right: 1px solid #d8dce5;
  }
  .right-span{
    border-right: 1px solid #d8dce5;
    border-radius:0 4px 4px 0;
  }
  /* 属性标题*/
  .title{
    font-size: 12px;
    font-weight: 600;
    padding: 0 3px;
  }
  .secondTitle{
    font-size: 13px;
    padding: 0 3px;
    margin: 6px 0;
  }
  /* 横向流式布局 */
  .flex-r{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  div.list-folder > li{
    display: inline;
    /*border: solid 1px black;*/
    float: left;
    /*margin-top: 5px;*/
    /*margin-right: 5px;*/

    padding: 10px;
  }  div.list-folder > ul{
       margin: 0px;
       padding: 0px;
     }
  .active{
    border: 2px dashed #ff3f34;
  }
  /deep/ .el-radio__label{
    /*padding: 0 !important;*/
    padding-left: 7px;
    margin: 5px 0 !important;
  }
  .list-group-item {
    cursor: move;
  }
  /*.list-group-item i {*/
  /*cursor: pointer;*/
  /*}*/
  .flip-list-move {
    transition: transform 0.5s;
  }
  .no-move {
    transition: transform 0s;
  }
  .foldLeft{
    height: 10px;
    width: 10px;
    background: #ecf0f4;
    float: left;
  }
  .leftIcon{
    background: #8a8a8a;
    position: absolute;
    top: 50%;
    width: 10px;
  }
  .foldRight{
    height: 10px;
    width: 10px;
    background: #ecf0f4;
    float: right;
  }
  .rightIcon{
    background: #8a8a8a;
    position: absolute;
    top: 50%;
    width: 10px;
  }
  .elCard{
    background: transparent;
    border: none;
    text-align: center;
    color: #fff;
  }
  .elCard:hover {
    color: #409EFF !important;
  }
  /deep/ .el-card__body{
    padding: 0px;
  }
  /deep/ .el-link.el-link--default {
    color: white !important;
  }
  /deep/ .el-link.el-link--default:hover {
    color: #409EFF !important;
  }
  /deep/ .el-divider__text, .el-link {
    font-weight: 500;
    font-size: 14px;
    margin: 5px;
  }
  .slide-fade-enter-active {
    transition: all .2s ease-in;
  }
  .slide-fade-leave-active {
    transition: all .2s ease-out;
  }
  .slide-fade-enter, .slide-fade-leave-to {
    /* .slide-fade-leave-active for below version 2.1.8 */
    transform: translateY(10px);
    opacity: 0;
  }
  .bgb{
    background-color: #409eff;
  }
</style>
